<template>
  <div v-loading="loading">
    <div class="chart" id="main" style="width: 550px; height: 450px"></div>
    <div class="data">
      <div class="month-select">
        <el-date-picker v-model="monthYear" type="month" placeholder="选择月">
        </el-date-picker
        ><br />
      </div>
      <span class="oneSpan"
        >剩余预算：{{ numData.budgetMoney - numData.outCome }}.00</span
      >
      <el-divider></el-divider>
      <span class="twoSpan">本月预算：{{ numData.budgetMoney }}.00</span><br />
      <span class="twoSpan">本月支出：{{ numData.outCome }}.00</span>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getUser } from "@/api/user";
import { getOutcome } from "@/api/bill";
import { getTeamByName } from "@/api/team";
export default {
  name: "index",
  data() {
    return {
      monthYear: this.dayjs().startOf("month").format("YYYY-MM"),
      numData: {
        budgetMoney: "",
        income: "",
        outCome: "",
      },
      loading: true,
    };
  },
  async mounted() {
    await this.getMoneyData();
    this.$nextTick(function () {
      this.getPie(this.income, this.outCome);
    });
    this.getLogUser();
  },
  watch: {
    numData: {
      deep: true,
      handler(newVar) {
        this.getPie(newVar);
      },
    },
    monthYear: {
      deep: true,
      handler() {
        this.getMoneyData();
      },
    },
  },
  methods: {
    getLogUser() {
      const teamParam = {
        teamName: this.$store.getters.teamName,
      };
      if (teamParam.teamName != "个人版") {
        getTeamByName(teamParam).then((res) => {
          this.numData.budgetMoney = res.data.budgetMoney;
        });
      } else {
        const param = {
          teamName: this.$store.getters.teamName,
          userName: this.$store.getters.name,
        };
        getUser(param).then((res) => {
          this.numData.budgetMoney = res.data.budgetMoney;
        });
      }
    },

    getMoneyData() {
      const param = {
        userName: this.$store.getters.name,
        monthYear: this.dayjs(this.monthYear).format("YYYY-MM"),
        teamName: this.$store.getters.teamName,
      };
      getOutcome(param).then((res) => {
        if (res.code == 0) {
          this.numData.income = res.data.income.monthMoney;
          this.numData.outCome = res.data.outCome.monthMoney;
        }
      });
    },
    getPie(newVar) {
      // 绘制图表
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        //标题
        title: {
          text: "预算统计",
          x: "left", //标题位置
          // textStyle: { //标题内容的样式
          //   color: '#000',
          //   fontStyle: 'normal',
          //   fontWeight: 100,
          //   fontSize: 16 //主题文字字体大小，默认为18px
          // },
        },
        // stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)",
        },
        //图例
        legend: {
          //图例  标注各种颜色代表的模块
          // orient: 'vertical',//图例的显示方式  默认横向显示
          bottom: 10, //控制图例出现的距离  默认左上角
          left: "center", //控制图例的位置
          // itemWidth: 16,//图例颜色块的宽度和高度
          // itemHeight: 12,
          textStyle: {
            //图例中文字的样式
            color: "#000",
            fontSize: 16,
          },
          data: ["收入", "支出"], //图例上显示的饼图各模块上的名字
        },
        //饼图中各模块的颜色
        color: ["#32dadd", "#b6a2de", "#5ab1ef"],
        // 饼图数据
        series: {
          // name: 'bug分布',
          type: "pie", //echarts图的类型   pie代表饼图
          radius: "70%", //饼图中饼状部分的大小所占整个父元素的百分比
          center: ["50%", "50%"], //整个饼图在整个父元素中的位置
          // data:''               //饼图数据
          data: [
            //每个模块的名字和值
            { name: "收入", value: newVar.income },
            { name: "支出", value: newVar.outCome },
          ],
          itemStyle: {
            normal: {
              label: {
                show: true, //饼图上是否出现标注文字 标注各模块代表什么  默认是true
                // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
              },
              labelLine: {
                show: true, //官网demo里外部标注上的小细线的显示隐藏    默认显示
              },
            },
          },
        },
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      this.loading = false;
    },
  },
};
</script>

<style scoped type="scss">
.data {
  min-width: 300px;
  float: right;
  position: relative;
  bottom: 200px;
  right: 200px;
}
.oneSpan {
  font-size: 26px;
}
.twoSpan {
  color: rgb(156, 155, 150);
}
.month-select {
  position: relative;
  bottom: 100px;
}
.chart {
  position: relative;
  top: 50px;
}
</style>

